<template>
	<el-form ref="form" :model="form" :rules="formRules" label-width="80px">
		<el-alert
			title="参考答案"
			type="success"
			:description="referenceKey"
			v-if="displayKey"
			effect="dark"
			:closable="false">
		</el-alert>
		<slot name="content">
			<el-form-item v-for="(item, index) in formFields" :key="index" :prop="item.key" v-if="item.hasOwnProperty('ignore') ? !item.ignore : true" label-width="auto">
				<p style="margin-bottom: 10px"><span v-if="withNumber">{{ index + 1 }}.</span><span v-html="item.title"></span></p>
				
				<el-input v-model="form[item.key]" v-if="item.type === 'input'"></el-input>
				
				<el-radio-group v-model="form[item.key]" v-if="item.type === 'radio'">
					<el-radio v-for="(value, index) in item.value" :key="index" :label="value.key">{{ value.name }}</el-radio>
				</el-radio-group>
				
				<el-checkbox-group v-model="form[item.key]" v-if="item.type === 'checkbox'">
					<el-checkbox border v-for="(value, index) in item.value" :key="index" :label="value.key" :disabled="value.hasOwnProperty('disabled') ? value.disabled : false">{{ value.name }}</el-checkbox>
				</el-checkbox-group>
				
				<el-table
				:data="[{}]"
				border
				style="width: 100%"
				v-if="item.type === 'table'">
					<el-table-column
					  :label="value.name"
					  v-for="(value, index) in item.value"
					  :key="index">
					  <template slot-scope="scope">
						<el-form-item label-width="auto" :prop="item.value[index].key">
							<el-input v-model="form[item.value[index].key]"></el-input>
						</el-form-item>
					  </template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</slot>
		<full-width-button type="primary" :text="submitText" v-if="displaySubmit" :click="submit"></full-width-button>
		<full-width-button type="warning" text="继续学习" v-if="hasKey && displayKey" :click="goToNext"></full-width-button>
		<full-width-button type="success" :plain="true" text="显示答案" :click="showKey" v-if="hasKey && !displayKey"></full-width-button>
	</el-form>
</template>

<script>
import { push } from '~/router'
import store from '~/utils/store'
export default {
	props: {
		onSubmit: {
			type: Function,
			default: () => (_) => {},
		},
		submitText: {
			type: String,
			default: '提交'
		},
		withNumber: {
			type: Boolean,
			default: true
		},
		formFields: {
			type: Array,
			default: () => {
				return []
			},
			required: true
		},
		referenceKey: {
			type: String,
			default: ''
		},
		dialogGoUri: {
			type: String
		},
		goToNextCall: {
			type: Function
		},
		storeKey: {
			type: String,
			default: 'd'
		}
	},
	data() {
		let self = this
		let data = {}
		let formRules = {}
		
		for (let item of self.formFields)
		{
			let key = item.key
			data[key] = item.hasOwnProperty('default') ? item.default : ''
			
			if (item.hasOwnProperty('nullable') && item.nullable)
				formRules[key] = []
			else
				formRules[key] = [{ required: true, message: '此项不能为空', trigger: 'blur' }]
			
			if (item.hasOwnProperty('answer'))
			{
				let answer = item.answer
				formRules[key] = formRules[key].concat({ validator: (rule, value, callback) => 
				{
					if (value != answer)
					{
						callback(new Error('回答错误'))
					}
					else
					{
						callback()
					}
				}, trigger: 'blur' })
			}
		}
		
		return {
			form: data,
			hasKey: this.referenceKey !== '',
			displayKey: false,
			formRules: formRules,
			displaySubmit: true
		}
	},
	methods: {
		submit()
		{
			this.$refs.form.validate((valid) => {
				let questionKey = `${this.storeKey}_` // ${key}_
				
				if (this.hasKey)
					if (valid) {
						store.addItemTimes(questionKey + 's');
						this.showKey()
						this.$message({
							message: '回答全部正确！',
							type: 'success'
						})
						this.displaySubmit = false
					} else {
						store.addItemTimes(questionKey + 'f');
					}
				
				this.onSubmit(this.form, valid)
			})
		},
		showKey()
		{
			this.displayKey = true
		},
		goToNext() {
			if (this.goToNextCall)
				this.goToNextCall()
			else
				push(this, this.dialogGoUri);
		}
	}
}
</script>

<style>
</style>
